<template>
  <el-form :model="form" ref="form" label-width="100px">
    <!-- 暂缓/激活记录 -->
    <div class="card-wrap flex-column justify-end card-padding" style="margin-top: 20px">
      <div class="card-title-wrap">
        <span>暂缓/激活记录</span>
        <span></span>
      </div>
      <table-page :dataList="form.suspendActivate" border :total="total">
        <!-- 普通列插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作记录" align="center" prop="operation">
            <template slot-scope="scope">
              <span>{{ scope.row.operation == 0 ? '激活催收' : '暂缓催收' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center" prop="remark" min-width="200px" show-overflow-tooltip />
          <el-table-column label="提交人" align="center" prop="createBy" />
          <el-table-column label="提交时间" align="center" prop="createTime" />
        </template>
        <!-- 操作插槽 -->
        <template slot="tableCol">
          <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <e-button v-hasPermi="['channel:gpsRate:edit']" size="mini" type="text" @click="checkHistory(1, scope.row)">查看</e-button>
            </template>
          </el-table-column>
        </template>
      </table-page>
    </div>

    <!-- 手动结清信息 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <div class="card-title-wrap">
        <span>手动结清信息</span>
        <span></span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="待收金额:">
            <span style="color: black">{{ format_thousand(form.manualSettlementVo && form.manualSettlementVo.receivableAmount) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结清金额:">
            <span style="color: black">{{ format_thousand(form.manualSettlementVo && form.manualSettlementVo.settlementAmount) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款时间:">
            <span style="color: black" v-if="form.manualSettlementVo">{{ form.manualSettlementVo && form.manualSettlementVo.collectionTime }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="说明:">
            <span style="color: black" v-if="form.manualSettlementVo">{{ form.manualSettlementVo && form.manualSettlementVo.remark }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附件:">
            <ImageCommon v-if="form.manualSettlementVo" :up-type="2" info="选择附件" :limit="20" v-model="form.manualSettlementVo.attachments" :disabled="true"></ImageCommon>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 委外收车记录 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <div class="card-title-wrap">
        <span>委外收车记录</span>
        <span></span>
      </div>
      <table-page :dataList="form.pickUpTheCar" border :total="total">
        <!-- 普通列插槽 -->
        <template slot="tableColAc">
          <el-table-column label="委外收车编号" align="center" prop="code" />
          <el-table-column label="收车供应商" align="center" prop="receivingSupplier" />
          <el-table-column label="提交人" align="center" prop="createBy" />
          <el-table-column label="提交时间" align="center" prop="createTime" />
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.receiving_progress" :value="scope.row.status" />
            </template>
          </el-table-column>
        </template>
        <!-- 操作插槽 -->
        <template slot="tableCol">
          <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <e-button v-hasPermi="['channel:gpsRate:edit']" size="mini" type="text" @click="checkHistory(2, scope.row)">查看</e-button>
            </template>
          </el-table-column>
        </template>
      </table-page>
    </div>

    <!-- 司法诉讼记录 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <div class="card-title-wrap">
        <span>司法诉讼记录</span>
        <span></span>
      </div>
      <table-page :dataList="form.judicialProceedings" border :total="total">
        <!-- 普通列插槽 -->
        <template slot="tableColAc">
          <el-table-column label="司法诉讼编号" align="center" prop="code" />
          <el-table-column label="提交人" align="center" prop="createBy" />
          <el-table-column label="提交时间" align="center" prop="createTime" />
          <el-table-column label="状态" align="center" prop="status">
            <template v-slot="{ row }">
              <dict-tag :options="dict.type.progress_litigation" :value="row.status" />
            </template>
          </el-table-column>
        </template>
        <!-- 操作插槽 -->
        <template slot="tableCol">
          <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <e-button v-hasPermi="['channel:gpsRate:edit']" size="mini" type="text" @click="checkHistory(3, scope.row)">查看</e-button>
            </template>
          </el-table-column>
        </template>
      </table-page>
    </div>

    <!-- 销账申请记录 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <div class="card-title-wrap">
        <span>销账申请记录</span>
        <span></span>
      </div>
      <table-page :dataList="form.writeOffApplication" border :total="total">
        <!-- 普通列插槽 -->
        <template slot="tableColAc">
          <el-table-column label="销账金额" align="center" prop="amount">
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.amount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center" prop="remark" />
          <el-table-column label="提交人" align="center" prop="createBy" />
          <el-table-column label="提交时间" align="center" prop="createTime" />
          <el-table-column label="审批状态" align="center" prop="approvalStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.cs_approval_status" :value="scope.row.approvalStatus" />
            </template>
          </el-table-column>
        </template>
        <!-- 操作插槽 -->
        <template slot="tableCol">
          <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <e-button v-hasPermi="['channel:gpsRate:edit']" size="mini" type="text" @click="checkHistory(4, scope.row)">查看</e-button>
            </template>
          </el-table-column>
        </template>
      </table-page>
    </div>

    <!-- 添加或修改测试单表对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" width="45%">
      <el-form :model="formDig" ref="formDig" label-width="150px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="提交人:">
              <span style="color: black">{{ formDig.createBy }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="提交时间:">
              <span style="color: black">{{ formDig.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="说明:">
              <span style="color: black">{{ formDig.remark }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="附件:">
              <ImageCommon :up-type="2" info="选择附件" :limit="20" v-model="formDig.attachments" :disabled="true"></ImageCommon>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </el-form>
</template>

<script>
export default {
  // 工单方案
  name: 'workOrder',
  dicts: ['cs_approval_status', 'receiving_progress', 'progress_litigation'],
  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  data() {
    return {
      total: 0,
      title: '',
      open: false,
      formDig: {},
    }
  },
  created() {},
  methods: {
    checkHistory(type, row) {
      if (type == 1) {
        this.open = true
        this.title = row.operation == 0 ? '激活催收' : '暂缓催收'
        this.formDig = row
      } else if (type == 4) {
        this._toPage({
          name: 'WriteOffDetails',
          query: {
            type: 'CollectionWarning',
            beFrom: 'InitiateACollectionDetail',
            id: row.id,
          },
        })
      } else if (type == 2) {
        this._toPage({
          name: 'PickUpTheCarDetail',
          query: {
            type: 'detail',
            id: row.id,
          },
        })
      } else if (type == 3) {
        this._toPage({
          name: 'IitigationApplicationinfo',
          query: {
            id: row.id,
          },
        })
      }
    },
    cancel() {
      this.open = false
    },
    submitForm() {
      this.open = false
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
    font-size: 16px;
  }
}
</style>
